import { ReqGetHospitalShow } from "@/api/hospital/hospitalList";
import { ReqGetHospitalShowResponse } from "@/api/hospital/model/hospitalListTypes";
import { Button, Card, Descriptions } from "antd";
import React, { useEffect, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";

export default function HospitalListShow() {
  // 创建navigate函数
    let navigate = useNavigate();
    // 声明一个状态,保存医院详情的状态
    let [hospital,setHospital] = useState<ReqGetHospitalShowResponse | undefined>();
    // 获取医院id
    let {id} = useParams();
    // 组件挂载完毕
    useEffect(()=>{
      // 发送ajax请求
        ReqGetHospitalShow(id as string).then(value=>{
          // 更新医院状态
            setHospital(value);
        })
    },[id]);
  return (
    <Card>
      <Descriptions title="基本信息" bordered>
        <Descriptions.Item label="医院名称" span={1.5} style={{width:150}}>{hospital?.hospital.hosname}</Descriptions.Item>
        <Descriptions.Item label="医院Logo" span={1.5}>
            <img width={100} src={"data:image/png;base64," + hospital?.hospital.logoData} alt='logo'></img>
        </Descriptions.Item>
        <Descriptions.Item label="医院编码" span={1.5} style={{width:150}}>{hospital?.hospital.hoscode}</Descriptions.Item>
        <Descriptions.Item label="医院地址" span={1.5}>{hospital?.hospital.param.fullAddress}</Descriptions.Item>
        <Descriptions.Item label="坐车路线" span={3} style={{width:150}}>{hospital?.hospital.route}</Descriptions.Item>
        <Descriptions.Item label="医院简介" span={3} style={{width:150}}>{hospital?.hospital.intro}</Descriptions.Item>
      </Descriptions>
      <div className="h-20"></div>
      <Descriptions title="预约规则信息" bordered>
        <Descriptions.Item label="预约周期" span={1.5}>{hospital?.bookingRule.cycle}</Descriptions.Item>
        <Descriptions.Item label="放号时间" span={1.5}>{hospital?.bookingRule.releaseTime}</Descriptions.Item>
        <Descriptions.Item label="停挂时间" span={1.5}>{hospital?.bookingRule.stopTime}</Descriptions.Item>
        <Descriptions.Item label="退号时间" span={1.5}>{hospital?.bookingRule.quitTime}</Descriptions.Item>
        <Descriptions.Item label="预约规则" span={3}>
            {
                hospital?.bookingRule.rule.map((item,index)=>{
                    return <p key={index}>{item}</p>
                })
            }
        </Descriptions.Item>
      </Descriptions>
      <div className="h-20"></div>
      <Button onClick={()=>{
        navigate(-1)
      }}>返回</Button>
    </Card>
  );
}
